<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="关联借款单" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="loanBillId">
              <select-finance-loan-bill-input :disabled="formDisabled" :teamId="teamId" :applicant="applyCompany" v-model="model.loanBillId" @back="back"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="借款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.amount" placeholder="请输入借款金额" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="使用日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useDate">
              <j-date :disabled="formDisabled" placeholder="请选择使用日期" v-model="model.useDate"  style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnDate">
              <j-date :disabled="formDisabled" placeholder="请选择归还日期" v-model="model.returnDate"  style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="本次还款金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currentReturnAmount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.currentReturnAmount" placeholder="请输入本次还款金额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="累计已还金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnedTotalAmount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.returnedTotalAmount" placeholder="请输入累计已还金额" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="累计已报销金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reimbursedTotalAmount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.reimbursedTotalAmount" placeholder="请输入累计已报销金额" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总冲账金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalAmount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.totalAmount" placeholder="请输入总冲账金额" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="剩余未还金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unreturnedTotalAmount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.unreturnedTotalAmount" placeholder="请输入剩余未还金额" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import SelectFinanceLoanBillInput from '@/views/scy/components/SelectFinanceLoanBillInput'//关联借款单
  import {Decimal} from 'decimal.js'

  export default {
    name: 'ErpFinanceRepaymentSlipDetailForm',
    components: {
      SelectFinanceLoanBillInput
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //申请公司
      applyCompany: {
        type: String,
        default: null,
        required: false
      },
      //团队
      teamId: {
        type: String,
        default: '',
        required: false
      },
    },
    data () {
      return {
        flag: false,
        model:{
        },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        confirmLoading: false,
        validatorRules: {
          currentReturnAmount: [
              { required: true, message: '请输入本次还款金额!', trigger: 'blur'},
              { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的还款金额!' },
          ],
          loanBillId: [
              { required: true, message: '请选择关联借款单!', trigger: 'change'},
          ],
        },
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      back(item) {
        const res = item[0]
        this.model.amount = res.amount
        this.model.useDate = res.useDate
        this.model.returnDate = res.returnDate
        this.model.returnedTotalAmount = res.repaymentAmount
        this.model.reimbursedTotalAmount = res.travelReimbursementAmount + res.expenseReimbursementAmount
        this.model.totalAmount = res.repaymentAmount + res.travelReimbursementAmount + res.expenseReimbursementAmount
        let amount = new Decimal(this.model.amount).sub(new Decimal(this.model.totalAmount))
        this.model.unreturnedTotalAmount = amount.toNumber().toFixed(2)
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs["form"].clearValidate();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if(this.model.currentReturnAmount > this.model.unreturnedTotalAmount) {
              that.$message.warning('本次还款金额大于剩余未还金额，请重新输入！')
            } else {
              that.$emit('ok', this.model, this.flag);
            }
          }
        })
      },
    }
  }
</script>
